<template>
  <div v-if="Object.keys(goodsInfo).lenght !== 0" class="goods-info">
    <!-- 商品标题 -->
    <div class="title">
      <div class="tit-start"></div>
      <div class="tit-content">{{ goodsInfo.desc }}</div>
      <div class="tit-end"></div>
    </div>
    <!-- 商品描述 -->
    <div class="info-key" v-if="goodsInfo.detailImage">
      {{ goodsInfo.detailImage[0].key }}
    </div>
    <!-- 商品展示图片 -->
    <div class="info-list" v-if="goodsInfo.detailImage">
      <img
        v-for="item in goodsInfo.detailImage[0].list"
        :key="item"
        :src="item"
        @load="imgLoad"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailGoodsInfo',
  props: {
    goodsInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      count: 0,
      imgNum: 0
    }
  },
  methods: {
    imgLoad() {
      if (++this.count === this.imgNum) {
        this.$emit('imgLoad')
      }
    }
  },
  watch: {
    goodsInfo() {
      this.imgNum = this.goodsInfo.detailImage[0].list.length
    }
  }
}
</script>

<style type="text/css" scoped>
.goods-info {
  padding: 5px 10px;
}
.title {
  display: flex;
  font-size: 15px;
  flex-direction: column;
  justify-content: space-between;
}
.show .tit-start,
.show .tit-end {
  width: 20%;
  position: relative;
  padding: 10px;
}
.show .tit-start {
  border-bottom: 1px solid #333;
}
.show .tit-start::after {
  content: '';
  height: 6px;
  width: 6px;
  background: #333;
  position: absolute;
  bottom: 0;
  left: 0;
}
.show .tit-end::after {
  content: '';
  height: 6px;
  width: 6px;
  background: #333;
  position: absolute;
  bottom: 20px;
  right: 0;
}
.show .tit-end {
  border-top: 1px solid #333;
  align-self: flex-end;
}
.tit-content {
  padding: 10px 0;
  line-height: 5vh;
}
.info-list img {
  width: 100%;
}
</style>
